<template>
    <div class="erpInfoBaseSupplier-container flex flex-col">
        <a-card class="mb-2.5">
            <common-form :model="state.queryForm" name="menu-form" @query="handleQuery" @add="handleAdd"
                @reset="handleReset">
                <a-form-item label="会员卡号" name="supplier" class="w-1/2.5">
                    <a-input v-model:value="state.queryForm.supplier" placeholder="请输入会员卡号" />
                </a-form-item>
                <a-form-item label="联系人" name="contacts" class="w-1/2.5">
                    <a-input v-model:value="state.queryForm.contacts" placeholder="请输入联系人" />
                </a-form-item>
                <a-form-item label="手机号码" name="telephone" class="w-1/2.5">
                    <a-input v-model:value="state.queryForm.telephone" placeholder="请输入手机号码" />
                </a-form-item>
            </common-form>
        </a-card>
        <a-card class="flex-1 card-table">
            <common-table :columns="columnsOrigin" :data="state.tableData" :pagination="{
                total: state.tableParams.total,
                current: state.tableParams.page,
                pageSize: state.tableParams.pageSize,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['2', '5', '10', '20'],
                showTotal: (total: number) => `总数: ${total}`
            }" :loading="state.loading" @change="changePagination">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'operation'">
                        <div class="w-full">
                            <a-button ghost type="primary" class="mr-1" @click="handleEdit(record)">编辑</a-button>
                            <a-button danger type="primary" class="mr-1" @click="handleDelete(record)">删除</a-button>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex == 'enabled'">
                        <a-tag v-if="record.enabled" color="green">启用</a-tag>
                        <a-tag v-else color="red">停用</a-tag>
                    </template>
                </template>
            </common-table>
        </a-card>
        <a-modal v-model:open="state.isShow" :title="state.isEdit ? '编辑' : '新增'" @ok="handleAddEdit"
            @cancel="handleCancel">
            <a-form ref="formRef" :model="state.formState" name="basinfo-form" autocomplete="off"
                :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <a-form-item label="会员卡号" name="supplier"
                    :rules="[{ required: true, message: '会员卡号不能为空', trigger: 'blur' }]">
                    <a-input-search v-model:value="state.formState.supplier" readonly placeholder="请输入会员卡号">
                        <template #enterButton>
                            <a-button :disabled="state.isEdit ? true : false" @click="() => {
                                state.formState.supplier = getUUID()
                            }">生成ID</a-button>
                        </template>
                    </a-input-search>
                </a-form-item>
                <a-form-item label="联系人" name="contacts"
                    :rules="[{ required: true, message: '联系人不能为空', trigger: 'blur' }]">
                    <a-input v-model:value="state.formState.contacts" placeholder="请输入联系人" />
                </a-form-item>
                <a-form-item label="手机号码" name="telephone">
                    <a-input v-model:value="state.formState.telephone" placeholder="请输入手机号码" />
                </a-form-item>
                <a-form-item label="联系电话" name="phoneNum">
                    <a-input v-model:value="state.formState.phoneNum" placeholder="请输入联系电话" />
                </a-form-item>
                <a-form-item label="邮箱" name="email">
                    <a-input v-model:value="state.formState.email" placeholder="请输入邮箱" />
                </a-form-item>
                <a-form-item label="备注" name="description">
                    <a-textarea v-model:value="state.formState.description" placeholder="请输入备注" />
                </a-form-item>
                <a-form-item label="启用" name="enabled">
                    <a-switch v-model:checked="state.formState.enabled" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts" name="ErpInfoBaseSupplier">
import { reactive, useTemplateRef, onMounted, ref } from 'vue';
import commonTable from '@/components/common-table/index.vue'
import commonForm from '@/components/common-form/index.vue'
import { getUUID, showMsg } from '@/utils';
import type { ResType } from '@/api/types';
import { addInfoBaseSupplierApi, deleteInfoBaseSupplierApi, getInfoBaseSupplierListApi, updateInfoBaseSupplierApi } from '@/api/erp/infobase';
import type { TableParamsResType } from '@/views/system/onlineUser/type';
import type { FormInstance } from 'ant-design-vue';

const formRef = ref<FormInstance>()
const state = reactive({
    queryForm: {} as any,
    tableData: [] as any[],
    tableParams: {
        page: 1,
        pageSize: 10,
        total: 0 as any,
    },
    formState: {
    } as any,
    loading: false,
    isShow: false,
    isEdit: false
})

const columnsOrigin = reactive<any[]>([
    {
        title: '序号',
        align: "center",
        width: 60,
        customRender: ({ index }: { index: number }) => {
            return `${index + 1}`;
        },
        fixed: 'left',
    },
    {
        title: '会员卡号',
        align: "center",
        key: "supplier",
        dataIndex: 'supplier',
        width: 150,
    },
    {
        title: '联系人',
        align: "center",
        key: "contacts",
        dataIndex: 'contacts',
        width: 150,
    },
    {
        title: '手机号码',
        align: "center",
        key: "telephone",
        dataIndex: 'telephone',
        width: 150,
    },
    {
        title: '联系电话',
        align: "center",
        key: "phoneNum",
        dataIndex: 'phoneNum',
        width: 150,
    },
    {
        title: '邮箱',
        align: "center",
        key: "email",
        dataIndex: 'email',
        width: 150,
    },
    {
        title: '预付款',
        align: "center",
        key: "advanceIn",
        dataIndex: 'advanceIn',
        width: 150,
    },
    {
        title: '状态',
        align: "center",
        key: "enabled",
        dataIndex: 'enabled',
        width: 150,
    },
    {
        title: '备注',
        align: "center",
        key: "description",
        dataIndex: 'description',
        width: 150,
    },
    {
        title: '操作',
        align: 'center',
        key: "operation",
        dataIndex: 'operation',
        width: 250,
        fixed: 'right',
    }
])

const handleQuery = async () => {
    state.loading = true
    const params = Object.assign(state.queryForm, state.tableParams)
    params.type = "会员"
    const res: ResType<TableParamsResType<any>> = await getInfoBaseSupplierListApi(params)
    if (res.data.code == 200) {
        state.tableData = res.data.result.items
        state.tableParams.total = res.data.result.total ?? state.tableData.length
    }
    state.loading = false
}
const handleAdd = async () => {
    state.formState = {
        type: "会员"
    }
    state.isShow = true
    state.isEdit = false
}
const handleReset = async () => {
    state.queryForm = {}
    state.tableParams.page = 1
    await handleQuery()
}
const changePagination = async (pagination: { current: number, pageSize: number }) => {
    state.tableParams.page = pagination.current
    state.tableParams.pageSize = pagination.pageSize
    await handleQuery()
}
const handleEdit = (record: any) => {
    state.formState = { ...record }
    state.isShow = true
    state.isEdit = true
}
const handleDelete = async (record: any) => {
    const res: ResType<any> = await deleteInfoBaseSupplierApi({ id: record.id })
    if (res.data.code == 200) {
        showMsg("删除成功", 'success')
        await handleQuery()
    } else {
        showMsg("删除失败", 'error')
    }
}
const handleAddEdit = async () => {
    await formRef.value?.validate()
    if (state.isEdit && state.formState.id) {
        const res: ResType<any> = await updateInfoBaseSupplierApi(state.formState)
        if (res.data.code == 200) {
            showMsg("编辑成功", 'success')
            handleCancel()
            await handleQuery()
        }
        state.isEdit = false
    } else {
        const res: ResType<any> = await addInfoBaseSupplierApi(state.formState)
        if (res.data.code == 200) {
            showMsg("添加成功", 'success')
            handleCancel()
            await handleQuery()
        }
    }
}
const handleCancel = async () => {
    state.isShow = false
    state.formState = {
    }
    formRef.value?.resetFields()
}
onMounted(async () => {
    await handleQuery()
})
</script>

<style lang="scss" scoped>
.erpInfoBaseSupplier-container {
    .card-table {
        :deep(.ant-card-body) {
            height: 100%;
        }
    }
}

:deep(.ant-table-cell-fix-right) {
    // right: 0 !important;
}

:deep(.ant-btn >span) {
    display: inline-flex !important;
}
</style>